<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
<script type="text/javascript" src="<%=basePath%>/lib/mqtt/mqtt.min.js"></script>
<style type="text/css">
	#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	.mapContainer{
		height: 550px;width:100%;
	}
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}
	
	.mapContainer{
		height: 550px;width:100%;padding-left:170px;
	}
	
	.app-container{
		width: 100%;
		border-left: 1px solid #d9d9d9;
	}
	
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

.sceneList-info{
	padding-top: 10px;
	padding-left: 10px;
}
.generateStyle ,.infosgs {
	position: absolute;
	top: 18px;
	right: 10px;
	cursor: pointer;
}
.webui-popover{
	z-index: 19991015;
}
.showbtn{
	position: absolute;
    top: 22px;
    right: 56px;
    background: #4CAF50;
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: pointer;
}
.input-map{
	background-size: 5% ;
}
.BMap_cpyCtrl {
    display: none;
}
.jui-search_table{
	padding: 6px 8px 6px 10px;
	background: #fff;
	border-bottom: 1px solid #d9d9d9;
}
.layui-table thead tr{
 	background: #fff ;
}
.blue-span{
	background: #3499da;
    padding: 3px 6px;
    color: #fff;
    border-radius: 4px;
}

.red-span{
	background: #f44336;
    padding: 3px 6px;
    color: #fff;
    border-radius: 4px;
}

.pro-span{
	background: #4caf50;
    padding: 3px 6px;
    color: #fff;
    border-radius: 4px;
}

.grey-span{
	background: #bfbfbf;
    padding: 3px 6px;
    color: #fff;
    border-radius: 4px;
}
.layui-table{
	margin: 0;
}
.lpro-thead tr{
	background: #f2f2f2 !important;
}
</style>
</head>
<body>
	<div>
		<!--  下方部位  -->
		<div>
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<div class="prolist">
					<span>Item list</span>
				</div>
				<ul class="dashboard-menu scoll">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li onclick="changeScene(this)"  
						 <c:if test="${status.index ==0}">
						 	 class="active"
						 </c:if> 
						  sid="${obj.id}">
	                       <span class="icon-stack-overflow"></span>&nbsp;${obj.name }
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					
					<div class="jui-search_table" data-options="submit:'#searchbtns',
													table:'#init-table'" >
						 <input type-name="scene_id" class="scene_id" type="hidden" />
						 <input type="text" style="display: inline;width: 210px;margin-right: 20px;" 
						 		autocomplete="off" placeholder="Device SN retrieval" type-name="device_code" class="layui-input device_code">
						 <button type="button" id="searchbtns"  style="line-height: 34px;height:34px;" 
						 							class="layui-btn layui-btn-normal">search</button>
					</div>
					
					 <div style="margin:10px;">
						<div id="init-table" type-option="table"  config-option="url:'/page/node',wait:false,
									param:{ scene_id:'$.scene_id$'  },
									columns:[
										{'name':'Serial number','type':'seq','value':'seq','width':'8%'}, 
										{'name':'Device name','value':'name','limit':20,'width':'20%'}, 
										{'name':'Device SN','value':'device_code','limit':20,'width':'20%'}, 
										{'name':'Device status','type':'self',value_callback:'statusFunc2','value':'iot_node_status','width':'11%' },
										{'name':'Upload cycle [seconds]','value':'frequency','width':'12%' }, 
										{'name':'Controls','type':'self','value_callback':'value_function','width':'20%'}]" > 
						</div>
					</div> 
						
				</div>
			</div>
	</div>
</body>
<script type="text/javascript">
	
	$(function(){
		$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
	})
	
	// 设备协议
	function func_type_name(obj){
		if(obj == 82 ){
			return "<span class='pro-span'>HTTP</span>" ;
		}else if(obj == 83 ){
			return "<span class='pro-span'>TCP</span>" ;
		}else if(obj == 84) {
			return "<span class='pro-span'>MQTT</span>" ;
		}
	}
	
	// 设备状态
	function statusFunc2(obj){
		if(obj == 16 ){
			return "<span class='blue-span'>Online</span>" ;
		}else if(obj == 17) {
			return "<span class='red-span'>Offline</span>" ;
		}else if(obj == 18) {
			return "<span class='grey-span'>Unconnected</span>" ;
		}
	}
	
	function value_function(data,seq){
		return "<button type='button' onclick='LoknodeInfo(this,"+data.id+" )' class='layui-btn layui-btn-xs layui-btn-normal'>Device details</button>"
		+ "<button type='button' onclick='t_nodeDebug(this,"+seq+")' class='layui-btn layui-btn-xs layui-btn-normal'>Remote debugging</button>" 
		;
		//"<button type='button' onclick='t_editSensor(this,"+data.id+")' class='layui-btn layui-btn-xs layui-btn-normal'>定位</button>"
	}
	
	function t_nodeDebug(a , b){
		var deviceCode = $("#init-table").data("cache")[b].device_code;
		layer.open({
		      type: 2,
		      title: 'Remote debugging',
		      shadeClose: true,
		      shade: 0.4,
		      maxmin: true, //开启最大化最小化按钮
		      area: ['800px', '400px'],
		      content: basePath + "/page/devicedebug/index.html?devicecode=" + deviceCode
		   });
	}
	
	function LoknodeInfo(obj,s){
		// 打开窗口查看设备详情
		layer.open({
		      type: 2,
		      title: 'Device operation monitoring',
// 		      shadeClose: true,
		      shade: 0,
		      maxmin: true, //开启最大化最小化按钮
		      area: ['100%', '100%'],
		      content: basePath + "/page/devicedetail/index.html?id=" + s
		   });
	}
	
	// 切换场景的时候
	function changeScene(obj){
		// 
		var tempT = "/scene/update/"+ $(".scene_id").val()  ;
		client.unsubscribe(tempT );
		
		$(".device_code").val('');
		$(".dashboard-menu li").removeClass("active");
		$(obj).addClass("active");
		$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
		reflash( $(".dashboard-menu li.active").attr("sid"));
		
		// 关注其他项目
		tempT = "/scene/update/"+ $(".scene_id").val()  ;
		client.subscribe(tempT );
		// 发送订阅
		client.publish( '/sys/update/scene' , $(".scene_id").val() );
	}
	// 刷新信息
	function reflash(id){
		$("#init-table").data("params",{ scene_id: $(".scene_id").val() });
		$("#init-table").tableAdaptor();
	}
	
	// 上次刷新时间
	var lastTime = new Date().getTime() ;
	// 客户端
	var client ;
	function mqttInit(){
		// 连接选项
		const options = {
		      connectTimeout: 4000, // 超时时间
		      // 认证信息
		      clientId: 'brower_' + parseInt(Math.random()/31.1*10000000000),
		      reconnect : false, 
		      reconnectInterval: 10 ,
		      username: '<%=ProConfig.MQTT.USERNAME%>',
		      password: '<%=ProConfig.MQTT.PASSWORD%>',
		}
		client = mqtt.connect('ws://'+document.domain+':8083/mqtt', options) ;
		client.on('reconnect', function(error)  {
			$("#init-table").tableAdaptor( $(".curr").html() );
		})
		client.on('error', function(error) {
		    console.log('连接失败:', error)
		})
		client.on('message', function(topic, message,s) {
			if( message.toString() == '1' ){
				if( lastTime + 3*1000 < new Date().getTime() ){
					$("#init-table").tableAdaptor( $(".curr").html() );	
					lastTime = new Date().getTime() ;
				}
			}
		})
	}
	$(function(){
		mqttInit();
		
		setTimeout( function() {
			var tempT = "/scene/update/"+ $(".scene_id").val()  ;
			client.subscribe(tempT );
			client.publish('/sys/update/scene' , $(".scene_id").val() );
		}, 1000);
	})
	
	$(function(){
		$(document).delegate(".limiter","click",function(){
			layer.tips($(this).attr("tag") , this, {
				tips: [1, '#4682B4']
			});
		})
	})
	
</script>
</html>